<template>
<div class="tw-progressbar" :style="{height: height, backgroundColor: bgColor}" style="">
  <div :style="{height: height, backgroundColor: bgColor}" style="width:100%;"
    class="el-progress"
    :class="[
      'el-progress--' + type,
      status ? 'is-' + status : '',
      {
        'el-progress--without-text': !showText,
        'el-progress--text-inside': textInside,
      }
    ]"
    role="progressbar"
    :aria-valuenow="percentage"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <div class="el-progress-bar" v-if="type === 'line'">
      <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor: trackBackground, borderRadius: strokeRadius + 'px'}">
        <div class="el-progress-bar__middle" :style="barStyle1" style="position: absolute;">
          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage1}}%</div>
        </div>
        <div class="el-progress-bar__inner" :style="barStyle">
          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
        </div>
      </div>
    </div>
    <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
      <svg viewBox="0 0 100 100">
        <defs>
          <linearGradient id="greenGradient">
            <stop offset="0" :stop-color="colors[0]" />
            <stop offset="100%" :stop-color="colors[1]" />
          </linearGradient>
        </defs>
        <path class="el-progress-circle__track" :d="trackPath" :stroke="trackBackground" :stroke-width="relativeStrokeWidth" fill="none"></path>
        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" stroke="url(#greenGradient)" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle" v-if="useGradient"></path>
        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle" v-else></path>
      </svg>
    </div>
    <div class="el-progress__text" v-if="showText && !textInside">
    <!-- <div class="el-progress__text" v-if="showText && !textInside" :style="{fontSize: progressTextSize + 'px'}"> -->
      <template v-if="type === 'circle'">
        <div style="display: flex; align-items: center; justify-content: center;" :style="{height: width + 'px', width: width + 'px',fontSize: progressTextSize + 'px', fontFamily: detailFontFamily,color: digiColor}">{{totalpercent}}%</div>
      </template>
      <template v-else>
        <div style="margin-top:10px" v-if="status === 'text'">
          <span v-if="data.length>2">整体完成度</span>
          <span v-else-if="data.length > 0 && !!data[0].name">{{data[0].name}}</span>
          <span v-else></span>
          <span v-if="data[0].name">:</span>
          <span style="padding-left:5px">{{totalpercent}}%</span>
        </div>
        <i v-else :class="iconClass"></i>
      </template>
    </div>
  </div>
  <template v-if="showRightText">
  <div class="tw-progressbar-chartbox" :class="{xmarginleft: showText}">
    <div class="tw-progressbar-datalist" v-for="(item, index) in percentData" :key="index">
      <div class="m-itemdata" :class="{xborder: index>0}">
        <div class="m-itemdata-header" v-if="rightTextType==='rate'">
          <span class="xtitle">{{item.value}}</span>
          <span class="xmiddle">({{item.rate}}%)</span>
        </div>
        <div class="m-itemdata-header" v-else-if="rightTextType==='unit'">
          <span class="xtitle">{{item.value}}</span> <span class="xnumber">{{item.unit}}</span>
        </div>
        <div class="m-itemdata-header" v-else>
          <span class="xtitle">{{item.value}}</span> <span class="xmiddle">/</span> <span class="xnumber">{{total}}</span>
        </div>
        <div class="m-itemdata-footer">
          <svg class="xsvg-node">
            <circle cx="6px" cy="6px" r="5px" :fill="colors[index]" />
          </svg>
          <span class="xname" :title="item.name">{{item.name}}</span>
        </div>
      </div>
      <div class="el-progress__text" v-if="showText && !textInside && status === 'text'" :style="{fontSize: progressTextSize + 'px'}">
        <template v-if="!status">&nbsp;</template>
        <template v-else>
          <div v-if="status === 'text'">&nbsp;</div>
        </template>
      </div>
    </div>
  </div>
  </template>
</div>
</template>

<script>
const props = require('./props')

export default {
  name: 'chart-progress-base',

  props,

  data() {
    return {
      percentage: 0,
      percentage1: 0,
      percentData: [],
      totalpercent: 0,
      total: 0
    }
  },

  computed: {
    showborder () {
      if (this.data.length > 1) {
        return true
      } else {
        return false
      }
    },
    barStyle1 () {
      const style = {}
      style.width = this.percentage1 + '%'
      style.height = this.strokeWidth + 'px'
      style.left = this.percentage + '%'
      style.borderRadius = '0 ' + this.strokeRadius + 'px ' + this.strokeRadius + 'px' + ' 0'
      style.backgroundColor = this.colors[1]
      return style
    },
    barStyle () {
      const style = {}
      style.width = this.percentage + '%'
      style.backgroundColor = this.colors[0]
      if (this.useGradient) {
        style.backgroundImage = 'linear-gradient(90deg, ' + this.colors[0] + ', ' + this.colors[1] + ')'
      }
      if (this.data.length >= 2) {
        style.borderRadius = this.strokeRadius + 'px 0 0 ' + this.strokeRadius + 'px'
      } else {
        style.borderRadius = this.strokeRadius + 'px'
      }
      return style
    },
    relativeStrokeWidth () {
      return (parseFloat(this.strokeWidth) / parseFloat(this.width) * 100).toFixed(1)
    },
    trackPath () {
      const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10)

      return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`
    },
    perimeter () {
      const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2
      return 2 * Math.PI * radius
    },
    circlePathStyle () {
      const perimeter = this.perimeter
      return {
        strokeDasharray: `${perimeter}px,${perimeter}px`,
        strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
        transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
      }
    },
    stroke () {
      let ret
      if (this.color) {
        ret = this.color
      } else {
        switch (this.status) {
          case 'success':
            ret = '#13ce66'
            break
          case 'exception':
            ret = '#ff4949'
            break
          default:
            ret = '#20a0ff'
        }
      }
      return ret
    },
    iconClass () {
      if (this.type === 'line') {
        return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close'
      } else {
        return this.status === 'success' ? 'el-icon-check' : 'el-icon-close'
      }
    },
    progressTextSize () {
      return this.type === 'line'
        ? 12 + parseFloat(this.strokeWidth) * 0.4
        : parseFloat(this.width) * 0.2 + 2
    }
  },

  methods: {
    init() {
      this.percentage = 0
      this.percentage1 = 0
      this.total = 0
      if (this.data.length > 0) {
        let decimalNum = parseInt(this.decimalNum)
        let tencent = Math.pow(10, decimalNum)
        let total = 0
        this.data.forEach((item, index) => {
          total += parseFloat(item.value)
        })
        this.percentData = []

        this.data.forEach((item, index) => {
          let rate = Math.round(parseFloat(item.value) * 100 * tencent / total) / tencent
          if (this.data.length === 1) {
            rate = parseFloat(item.value)
          }
          if (index === 0) {
            this.percentage = rate
          } else if (index === 1) {
            this.percentage1 = rate
          }
          //
          if (!(this.noShowRightText && index === this.data.length - 1) && this.data.length !== 1) {
            this.percentData.push({
              rate: rate,
              ...item
            })
          }
        })

        this.totalpercent = Math.round((this.percentage + this.percentage1) * tencent) / tencent
        this.total = total
      }
    }
  },

  mounted () {
    this.init()
  },

  beforeDestroy () {
  },

  watch: {
    noShowRightText () {
      this.init()
    },
    // type () {
    //   this.setOption()
    // },

    data: {
      deep: true,
      handler () {
        this.init()
      }
    },

    // option: {
    //   deep: true,
    //   handler () {
    //     this.setOption()
    //   }
    // }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
